<link rel="stylesheet" href="css/SAO_menu.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@bf_3.5.1_2/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">

<body>
  <div id="SAO-back">
    <div id="SAO-menu">
      <div id="SAO-menu-content">
        <div class="utils-list">
          <div class="utils-list-item" onclick="clickAudio()">
            <div class="user-panel">
              <div class="user-panel-name">
                Akilar
              </div>
              <div class="user-panel-img">
                <img src="assets/info.png" alt="">
              </div>
              <div class="user-panel-properties">
                Welcome to Sword Art Online!
              </div>
            </div>
            <i class="fa fa-user" onclick="UtilsClick()"></i>
            <div class="menu-list">
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-link" onmouseover="Menuover()" onmouseout="Menuout()">
                  Link Start
                </i>
                <div class="menu-child" style="top: calc(-50% - 135px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-question-circle"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Help
                </i>
                <div class="menu-child" style="top: calc(-50% - 67.5px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="utils-list-item" onclick="clickAudio()">
            <div class="user-panel">
              <div class="user-panel-name">
                Akilar
              </div>
              <div class="user-panel-img">
                <img src="assets/info.png" alt="">
              </div>
              <div class="user-panel-properties">
                Welcome to Sword Art Online!
              </div>
            </div>
            <i class="fa fa-tools" onclick="UtilsClick()"></i>
            <div class="menu-list">
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-link"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Link Start
                </i>
                <div class="menu-child" style="top: calc(-50% - 135px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-question-circle"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Help
                </i>
                <div class="menu-child" style="top: calc(-50% - 67.5px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="utils-list-item" onclick="clickAudio()">
            <div class="user-panel">
              <div class="user-panel-name">
                Akilar
              </div>
              <div class="user-panel-img">
                <img src="assets/info.png" alt="">
              </div>
              <div class="user-panel-properties">
                Welcome to Sword Art Online!
              </div>
            </div>
            <i class="fa fa-comments"  onclick="UtilsClick()"></i>
            <div class="menu-list">
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-link"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Link Start
                </i>
                <div class="menu-child" style="top: calc(-50% - 135px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-question-circle"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Help
                </i>
                <div class="menu-child" style="top: calc(-50% - 67.5px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="utils-list-item" onclick="clickAudio()">
            <div class="user-panel">
              <div class="user-panel-name">
                Akilar
              </div>
              <div class="user-panel-img">
                <img src="assets/info.png" alt="">
              </div>
              <div class="user-panel-properties">
                Welcome to Sword Art Online!
              </div>
            </div>
            <i class="fa fa-cogs" onclick="UtilsClick()"></i>
            <div class="menu-list">
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-link"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Link Start
                </i>
                <div class="menu-child" style="top: calc(-50% - 135px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
              <div class="menu-list-item" onclick="clickAudio()">
                <i class="fa fa-question-circle"  onmouseover="Menuover()" onmouseout="Menuout()">
                  Help
                </i>
                <div class="menu-child" style="top: calc(-50% - 67.5px);">
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comment-dots">
                      Tidio
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-comments">
                      Comments
                    </i>
                  </div>
                  <div class="menu-list-child" onclick="clickAudio()">
                    <i class="fa fa-user-friends">
                      Candyhome
                    </i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="utils-list-item" onclick="clickAudio()">
            <i class="fa fa-power-off" onclick="SAOclose()"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <audio id="SAOlauncher" src="assets/Popup.SAO.Launcher.wav"></audio>
  <audio id="SAOClick" src="assets/Feedback.SAO.Click.wav"></audio>
  <script type="text/javascript" src="js/SAO_menu.js"></script>
</body>
